<template>
  <div class="formItem">
    <div class="head">
      <div class="back" @click="back">返回</div>
    </div>
    <div>
      <el-table :data="itemList" style="width: 90%;margin: 0 auto">
        <el-table-column prop="_id" label="ID" width="216"></el-table-column>
        <el-table-column prop="createdAt" label="提交时间" width="150"></el-table-column>
        <el-table-column
          v-for="item in F"
          :key="item._id"
          :prop="item._id"
          :label="item.LBL"
          width="150"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope)"
              type="text"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "FormItem",
  data() {
    return {
      itemList: [],
      F: []
    };
  },
  async mounted() {
    let id = this.$route.params.id;
    let submitRes = await this.$api.listData({ FORMID: id });
    let saveRes = await this.$api.info({ id });
    this.F = saveRes.F || [];
    let data = submitRes.list;
    let list = [];
    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      let obj = item.DATA;
      obj._id = item._id;
      obj.createdAt = new Date(item.createdAt).Format("yyyy-MM-dd hh:mm");
      list.push(obj);
    }
    this.itemList = list;
    // console.log(this.itemList);
  },
  methods: {
    back() {
      this.$router.push({ name: "Form" });
    },
    async deleteRow(row) {
      let res = await this.$api.removeData({ id: row.row._id });
      // console.log(res);
      if (res.deletedCount === 1) {
        this.itemList.splice(row.$index, 1);
      }else{
        this.$message("删除失败");
      }
    }
  }
};
</script>
<style lang="scss" >
.el-table {
  th,
  td {
    text-align: center;
  }
}
</style>
<style lang="scss" scoped>
.formItem {
  width: 100%;
  height: 625px;
  background: #ddd;
  .head {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: #eee;

    .back {
      width: 100px;
      text-align: center;
      float: left;
      margin-left: 100px;
    }
  }
}
</style>